<template>
  <n-menu :options="menuOptions" :default-expanded-keys="defaultExpandedKeys" />
</template>

<script lang="ts" setup>
import type { MenuOption } from 'naive-ui'
import { NMenu, NIcon, NProgress } from 'naive-ui'
import { ref } from 'vue'
import { onBeforeMount, h, Component } from 'vue'
import { RouterLink } from 'vue-router'
import $data from '@/utils/globalData'
import requset from "@/utils/requset"
import type { response } from "@/utils/requset"
import type { staffMenusResponse, projectListResponse } from "@/utils/interfaces/respone"
import {
  AlbumsOutline as Albums, BackspaceOutline as Backspace, IdCardOutline as IdCard,
  PeopleOutline as People,CashOutline as Cash
} from '@vicons/ionicons5'

const isAdmin = ref(false)

const projectMenus = ref<MenuOption[]>([])

const staffMenus = ref<MenuOption[]>([])

function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const defaultExpandedKeys = ref<string[]>([])

const mainMenu: MenuOption = {
  label: () =>
    h(
      RouterLink,
      {
        to: {
          name: 'main'
        }
      },
      { default: () => '主页' }
    ),
  key: 'main',
}
const exitMenu: MenuOption =
{
  label: () =>
    h(
      RouterLink,
      {
        to: {
          name: 'login'
        }
      },
      { default: () => '退出' }
    ),
  key: 'exit',
  icon: renderIcon(Backspace)
}
const algorithmMenu: MenuOption =
{
  label: () =>
    h(
      RouterLink,
      {
        to: {
          name: 'algorithm'
        }
      },
      { default: () => '算法管理' }
    ),
  key: 'algorithm',
  icon: renderIcon(Cash)
}
const menuOptions = ref<MenuOption[]>([])

function addStaffMenus() {
  initStaffMenu()
  // @ts-ignore：这个实例不会无限深
  let staffMenu: MenuOption = {
    label: '用户清单',
    key: 'staffs',
    children: staffMenus.value,
    show: isAdmin.value,
    icon: renderIcon(People)
  }
  menuOptions.value.push(staffMenu)
}

function addPorjectMenu() {
  initMeProjetcListMenu()
  // @ts-ignore：这个实例不会无限深
  let porjectMenu: MenuOption = {
    label: '我的项目',
    key: 'projects',
    children: projectMenus.value,
    show: !isAdmin.value,
    icon: renderIcon(Albums)
  }
  menuOptions.value.push(porjectMenu)
}

onBeforeMount(() => {
  let who = $data.getUser();
  menuOptions.value.push(mainMenu)
  if (who.user.roles.includes(2)) {
    isAdmin.value = true
    addStaffMenus()
  } else {
    isAdmin.value = false
    addPorjectMenu()
  }
  menuOptions.value.push(algorithmMenu)
  menuOptions.value.push(exitMenu)
})


function initMeProjetcListMenu() {
  requset.get("/project/getProjectListByMe", {})
    .then((res: response<projectListResponse>) => {
      if (res.status !== 200) {
        return;
      }
      let data = res.data.data.projectList;
      // console.log(res)
      for (let key in data) {
        let menu: MenuOption = {
          label: () => h(
            RouterLink,
            {
              to: {
                name: 'project',
                query: {
                  projectId: key
                },
              },
            },
            { default: () => data[key] }
          ),
          key: key,
          icon: () => h(
            NProgress,
            {
              type: 'circle',
              // status: 'success',
              percentage: 10
            },
            { default: () => "" }
          )
        }
        projectMenus.value.push(menu);
      }
    })
  defaultExpandedKeys.value.push('projects')
}

function initStaffMenu() {
  requset.get("/user/all", {})
    .then((res: response<staffMenusResponse[]>) => {
      if (res.status == 200) {
        let data = res.data.data;
        console.log(data)
        for (let staffMenu of data) {
          let menu: MenuOption = {
            // label: () => h(
            //   RouterLink,
            //   {
            //     to: {
            //       name: 'project',
            //       query: {
            //         // projectId: key
            //       },
            //     },
            //   },
            //   { default: () => data[key].name }
            // )
            label: staffMenu.name,
            key: staffMenu.id,
            icon: () => h(
              NIcon,
              null,
              { default: () => h(IdCard) }
            )
          }
          staffMenus.value.push(menu);
        }
      }
    })
}

</script>

<style scoped>
.menu {
  height: 100vh;
  float: left;
}
</style>
  